<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <el-menu class="navbar" mode="horizontal">
        <div class="left-menu">

        </div>
        <div class="right-menu">
            <el-dropdown class="avatar-container right-menu-item" trigger="click">
                <div class="avatar-wrapper">
                    <img class="user-avatar" src="images/setting.png">
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <span @click="getBaseInfo" style="display:block;">设置KEY</span>
                    </el-dropdown-item>
                    <!--<el-dropdown-item>-->
                        <!--<span @click="radixVisible = true" style="display:block;">设置基准</span>-->
                    <!--</el-dropdown-item>-->
                    <el-dropdown-item>
                        <span @click="openStatusDialog" style="display:block;">服务状态</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <span @click="logout" style="display:block;">退出</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-menu>
    <div class="container">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
                <div class='card-panel'>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.buy}}</div>
                        <div class="card-panel-text">BTC/USDT: {{v.sell}}</div>
                        <div class="card-panel-text">差值: {{ btc_sub }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="panel-group" :gutter="40">
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class='card-panel'>
                    <div class="card-panel-icon-wrapper ">
                        BTC
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.buy}}</div>
                        <div class="card-panel-text">BTC/USDT: {{v.sell}}</div>
                        <div class="card-panel-text">差值: {{ btc_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper ">
                        EOS
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.eosBuy}}</div>
                        <div class="card-panel-text">EOS/USDT: {{v.eosSell }}</div>
                        <div class="card-panel-text">差值: {{ eos_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper ">
                        XRP
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.xrpBuy}}</div>
                        <div class="card-panel-text">XRP/USDT: {{v.xrpSell}}</div>
                        <div class="card-panel-text">差值: {{ xrp_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper ">
                        LTC
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.ltcBuy}}</div>
                        <div class="card-panel-text">LTC/USDT: {{v.ltcSell}}</div>
                        <div class="card-panel-text">差值: {{ ltc_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper">
                        ETH
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.ethBuy}}</div>
                        <div class="card-panel-text">ETH/USDT: {{v.ethSell}}</div>
                        <div class="card-panel-text">差值: {{ eth_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper">
                        ETC
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.etcBuy}}</div>
                        <div class="card-panel-text">ETC/USDT: {{v.etcSell}}</div>
                        <div class="card-panel-text">差值: {{ etc_sub }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel">
                    <div class="card-panel-icon-wrapper">
                        BCH
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">季度: {{v.bchBuy}}</div>
                        <div class="card-panel-text"> BCH/USDT: {{v.bchSell}}</div>
                        <div class="card-panel-text">差值: {{ bch_sub }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--设置KEY dialog-->
        <el-dialog
                title="设置KEY"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form class="form-container">
                <el-form-item label="apiKey:">
                    <el-input  placeholder="请输入内容" v-model="baseInfo.apikey">
                    </el-input>
                </el-form-item>
                <el-form-item label="secretKey:">
                    <el-input  placeholder="请输入内容" v-model="baseInfo.secretKey">
                    </el-input>
                </el-form-item>
                <el-form-item label="基准:">
                    <el-input-number v-model="baseInfo.radix" autosize :precision="2" :step="1" :max="100" size="small"></el-input-number>
                    <span style="color:#F56C6C">注:相差多少开时下单</span>
                </el-form-item>
                <el-form-item label="递增:">
                    <el-input-number v-model="baseInfo.increase" autosize :precision="2" :step="1" :max="100" size="small"></el-input-number>
                    <span style="color:#F56C6C">注:递增多少开时再次下单</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateApiKey">确 定</el-button>
            </span>
        </el-dialog>

        <!--设置服务状态-->
        <el-dialog
                title="服务状态"
                :visible.sync="statusVisible"
                width="30%">
            <el-form class="form-container">
                <el-form-item label="状态:">
                    <span style="color : #F56C6C">{{processor.status}}</span>
                </el-form-item>
                <el-form-item label="操作:">
                    <el-button :type="processor.type" @click="startOrStop" size="small">{{processor.btntext}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-button type="primary" @click="send" size="small">订阅</el-button>
        <span>
            <label class="control-label">基准:</label>
            <el-input v-model="inputval" placeholder="基准" size="small" style="width: 100px"></el-input>
            <el-button type="primary" size="small">确定</el-button>
        </span>
        <div id="status"></div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="libs/vue.js"></script>
<!-- import JavaScript -->
<script src="libs/element.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</html>